import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import Touchable from '@/components/Touchable';
import Authorized from '@/components/authorized';
import Subscription from './subscription';

const mapStateToProps = ({ user }) => ({
    user: user.user,
});


function Listen(props) {
    const { user, navigation } = props;
    const goHistory = () => {
        navigation.navigate('History');
    }
    const goLogin = () => {
        navigation.navigate('Login');
    }
    const renderUnLogin = () => {
        return (
            <View style={styles.unLoginView}>
                <Text>登录后同步订阅内容</Text>
                <Touchable onPress={goLogin}>
                    <Text style={styles.loginText}>请登录</Text>
                </Touchable>
            </View>
        );
    }
    return <View style={styles.container}>
        <View style={styles.actions}>
            <Touchable style={styles.action} onPress={goHistory}>
                <Text>历史</Text>
            </Touchable>
        </View>
        <Authorized authority={!!user} noMatch={renderUnLogin}>
            <Subscription />
        </Authorized>
    </View>
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    actions: {
        padding: 25,
        margin: 15,
        flexDirection: 'row',
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#ccc',
        elevation: 4,
        backgroundColor: '#fff',
        borderRadius: 2,
    },
    action: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    unLoginView: {
        padding: 10,
        alignItems: 'center',
    },
    loginText: {
        margin: 10,
        color: '#f86442',
    },
});

export default connect(mapStateToProps)(Listen);